<template>
  <div class="content">
    <div class="information">
      <div class="header" v-text="'API Keys'"></div>
      <div class="api_keysbox">
				<div class="tips">
					<p>您可以使用设置的API Keys 通过计算机程序或者手机App进行自动化查询和交易。</p>
				</div>
				<div class="info_box">
					<!--01  -->
					<div class="a_key">
						<div class="flex flex-between">
							<div class="flex_left qr_txt">
								<h3 class="font-20">Key:</h3>
								<p>{{apikey}}</p>
								<button
										class="btn-danger btn-large btn-block w200"
										v-clipboard:copy="apikey"
										v-clipboard:success="onCopy"
										v-text="$t('copy')||'复制'"
									>
								</button>
							</div>
							<div class="flex_right qr_img">
                  <!-- <vue-qr
                    v-if="apikey"
                    :text="apikey"
                    :margin="10"
                    :size="130"
                  >
                  </vue-qr> -->
									<vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>
									<p>Key二维码</p>
							</div>
						</div>
					</div>
					<!-- 02 -->
					<div class="a_key">
						<div class="flex flex-between">
							<div class="flex_left qr_txt">
								<h3 class="font-20">Secret:</h3>
								<p>{{Secret}}</p>
								<button
										class="btn-danger btn-large btn-block w200"
										v-clipboard:copy="Secret"
										v-clipboard:success="onCopy"
										v-text="$t('copy')||'复制'"
									>
									</button>
							</div>
							<div class="flex_right qr_img">
                  <!-- <vue-qr
                    v-if="Secret"
                    :text="Secret"
                    :margin="10"
                    :size="130"
                  >
                  </vue-qr> -->
									<vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>
									<p>Secret二维码</p>
							</div>
						</div>
					</div>
					<!-- 03 -->
					<div class="a_key">
						<div class="flex flex-between">
							<div class="flex_left qr_txt">
								<h3 class="font-20">Key,Secret:</h3>
								<p>{{apiinfo}}</p>
								<button
										class="btn-danger btn-large btn-block w200"
										v-clipboard:copy="apiinfo"
										v-clipboard:success="onCopy"
										v-text="$t('copy')||'复制'"
									>
									</button>
							</div>
							<div class="flex_right qr_img">
                  <!-- <vue-qr
                    v-if="apiinfo"
                    :text="apiinfo"
                    :margin="10"
                    :size="130"
                  >
                  </vue-qr> -->
									<vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>
									<p>Key,Secret合并二维码</p>
							</div>
						</div>
					</div>
				</div>
      </div>
    </div>
  </div>
</template>
<script>
import bindTel from "../../components/dialogContent/addGathering";
import VueQr from "vue-qr";
export default {
  components: {
		bindTel,
		VueQr
  },
  data() {
    return {
			apiDatas:{},
			apikey:'',
			Secret:"",
			apiinfo:"",
    };
  },
  watch: {
  },
  mounted() {
		this.getuserkey();
		
  },
  computed: {

  },
  methods: {
		test(dataUrl,id){
            console.log(url, id)
        },
    getuserkey() {
      this.request(this.api.getuserkey).then(res => {
        if (res.code == "0") {
					this.apiDatas = res.data[0];
					this.apikey= res.data[0].apikey;
					this.Secret= res.data[0].secretkey;
					// this.apiinfo=res.data[0].apiinfo.toJSONString();
					this.apiinfo=JSON.stringify(res.data[0].apiinfo);

					this.CreateCode();
        }
      })
		},
		CreateCode(){
      // 生成Qrcode apikey
      if (this.apikey) return false;
        this.$bus.on("qrCodeLoad", url => {
          url && (this.apikey = url);
      });
      // Secret
      if (this.Secret) return false;
        this.$bus.on("qrCodeLoad", url => {
          url && (this.Secret = url);
			});
			// 合并码
			if (this.apiinfo) return false;
        this.$bus.on("qrCodeLoad", url => {
          url && (this.apiinfo = url);
      });
		},
		onCopy() {
      this.successMsg("复制成功");
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 25px;
}
.mt-20 {
  margin-top: 20px;
}
.information {
  .header {
    @include textVcenter;
    padding: 0 15px;
    color: #C1C1C1;
    border-bottom: 1px solid #303030;
  }
}
.api_keysbox{
	.tips{
		p{color: #C1C1C1;line-height: 40px;padding-left: 15px;}
	}
}
.qr_img{
	width: 150px;height: 150px;
	img{display: block; width: 150px;height: 150px;}
	p{color: #f8f8f8;text-align: center;line-height: 20px;}
	}
.qr_txt{
	h3{color: #eeeeee;line-height: 40px;}
	p{color: #eeeeee;line-height: 26px;width:750px;word-break: break-all;background: #434343;padding: 10px 0 10px 5px;}
}
.a_key{margin-bottom: 15px;}
.w200{margin-top: 15px;width: 100px;}
</style>

